📊 Guía de Tablas en HTML y CSS

Este documento explica cómo crear tablas en HTML y cómo darles estilo con CSS.

🔑 1. Estructura básica de una tabla

<table>
  <tr>   <!-- fila -->
    <th>Encabezado</th>   <!-- celda de encabezado -->
    <th>Encabezado</th>
  </tr>
  <tr>
    <td>Dato</td>         <!-- celda normal -->
    <td>Dato</td>
  </tr>
</table>

🔑 2. Colores en tablas

.tabla-colores th {
  background: navy;   /* Fondo azul marino */
  color: white;       /* Texto blanco */
}
.tabla-colores td {
  background: #f0f8ff; /* Azul muy claro */
}

🔑 3. Alineación de texto

.tabla-alineacion td {
  text-align: center; /* Centrar el texto en las celdas normales */
}
.tabla-alineacion th {
  text-align: right;  /* Alinear a la derecha en los encabezados */
}

🔑 4. Bordes personalizados

.tabla-bordes th, .tabla-bordes td {
  border: 2px dashed red; /* Bordes rojos y punteados */
}

🔑 5. Filas alternas (zebra stripes)

.tabla-zebra tr:nth-child(even) {
  background: #f2f2f2;
}

Aquí usamos el :nth-child(even), que selecciona las filas pares de la tabla (2, 4, 6...). Esto hace que las filas alternas tengan un color de fondo distinto, creando el efecto “cebra”. También existe :nth-child(odd) para las filas impares.

🔑 6. Efecto hover en filas

.tabla-hover tr:hover {
  background: yellow;
}

El pseudoclase :hover se activa cuando pasas el cursor sobre un elemento. En este caso, aplicamos background: yellow; a la fila completa <tr>. Así, al pasar el mouse sobre cualquier fila, toda ella se resalta en amarillo.